var app = new Vue({
    el:'#app',
    data:{
        newitem:newitem,
        catlog:catlog,
        images:images,
        models:[],
        skus:[],
        skuCount:1,
        skuTables:'',
        properties:[]
    },
    mounted:function () {
        $("#item-image-list").sortable();
    },
    methods:{
        pickImage:function () {
            var $this = this;
            Plugins.showImagePicker(function (data) {
                $this.images.push({
                    id:0,
                    thumb:data.thumb,
                    image:data.image,
                    thumburl:data.thumburl,
                    imageurl:data.imageurl
                });
            });
        },
        addModelName:function () {
            var $this = this;
            var content = '<div style="height: 280px; position: relative">' +
                '<iframe src="/seller/shopmodel/shownames" frameborder="0" style="width: 100%; height: 100%; position: absolute; left: 0; top: 0;"></iframe>' +
                '</div>';
            DSXUI.dialog({
                title:'选择型号分类',
                content:content,
                showFooter:false,
                afterShow:function (dlg) {
                    window.onPickedModel = function (item) {
                        dlg.close();
                        item.values = [];
                        if ($this.models.length > 2)
                        {
                            DSXUI.error('最多只能选择三个型号分类');
                            return false;
                        }
                        if (!$this.hasModel($this.models, item))
                        {
                            $this.models.push(item);
                            $this.buildSkuTable();
                        }
                    }
                }
            });
        },
        hasModel:function (arr, model) {
            for (i in arr)
            {
                if (arr[i].model_name == model.model_name)
                {
                    return true;
                }
            }
            return false;
        },
        addValues:function (model) {
            var $this = this;
            var url = '/seller/shopmodel/showvalues?model_id='+model.model_id;
            var content = '<div style="height: 280px; position: relative">' +
                '<iframe src="'+url+'" frameborder="0" style="width: 100%; height: 100%; position: absolute; left: 0; top: 0;"></iframe>' +
                '</div>';
            var checkedValus = [];
            DSXUI.dialog({
                title:'选择型号',
                content:content,
                afterShow:function () {
                    window.onPickedValue = function (values) {
                        checkedValus = values;
                    }
                },
                onConfirm:function (dlg) {
                    model.values = checkedValus;
                    dlg.close();
                    $this.buildSkuTable();
                }
            });
        },
        buildSkuTable:function () {
            var $this = this;
            var efectModels = [];
            var properties = [];
            var values = [];
            for (var i in this.models)
            {
                var model = this.models[i];
                if (model.values.length > 0)
                {
                    efectModels.push(model);
                    $this.skuCount*= model.values.length;
                    properties.push({
                        id:model.model_id,
                        name:model.model_name
                    });
                    values.push(model.values);
                }
            }
            $this.properties = properties;

            if (values.length > 0)
            {
                var res = combine(values.reverse());
                //合并单元格
                var row = [];
                var rowspan = res.length;
                for(var n=values.length-1; n>-1; n--) {
                    row[n] = parseInt(rowspan/values[n].length);
                    rowspan = row[n];
                }
                row.reverse();

                //table tr td
                var str = "";
                var len = res[0].length;
                for (var i=0; i<res.length; i++) {
                    var tmp = "";
                    for(var j=0; j<len; j++) {
                        if(i%row[j]==0 && row[j]>1) {
                            tmp += "<td rowspan='"+ row[j] +"'>"+res[i][j].model_value+"</td>";
                        }else if(row[j]==1){
                            tmp += "<td>"+res[i][j].model_value+"</td>";
                        }
                    }
                    str += "<tr>" + tmp + "<td><input type=\"text\" class=\"form-control w90\"></td>" + "<td><input type=\"text\" class=\"form-control w90\"></td>" + "</tr>";
                }

                //thead
                var th = "";
                for(var k=0; k<len; k++) {
                    th += "<th>"+ properties[k].name +"</th>";
                }
                th = "<thead>"+th+"<th width='90'>价格</th>" + "<th width='90'>数量</th>" +"</thead>";
                str = "<table class=\"sku-table\" width=\"100%\" cellpadding=\"0\" cellspacing=\"0\">" + th + str + "</table>";
            }

            this.skuTables = str;
        },
        delValue:function (model, value) {
            var index = model.values.indexOf(value);
            model.values.splice(index, 1);
            this.buildSkuTable();
        },
        delModel:function (model) {
            var index = this.models.indexOf(model);
            this.models.splice(index, 1);
            this.buildSkuTable();
        }
    }
});

//排列组合
function combine(arr) {
    var r = [];
    (function f(t, a, n) {
        if (n == 0) return r.push(t);
        for (var i = 0; i < a[n-1].length; i++) {
            f(t.concat(a[n-1][i]), a, n - 1);
        }
    })([], arr, arr.length);
    return r;
}
